<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import wall from '~/assets/wall.png'
import floor from '~/assets/floor.png'
import { MapTile, useEleSelectStore } from '~/stores'

const { currentEle } = storeToRefs(useEleSelectStore())
const { setCurrentEle } = useEleSelectStore()
</script>

<template>
  <div class="my-3 flex gap-3">
    <img
      wh-50px cursor-pointer border-2 :src="wall" :class="[
        currentEle === MapTile.WALL ? ' border-blue-500' : ' border-transparent',
      ]"
      @click="setCurrentEle(MapTile.WALL)"
    >
    <img
      wh-50px cursor-pointer border-2 :src="floor"
      :class="[
        currentEle === MapTile.FLOOR ? ' border-blue-500' : ' border-transparent',
      ]"
      @click="setCurrentEle(MapTile.FLOOR)"
    >
  </div>
</template>

<style scoped lang='scss'>

</style>
